<template>
  <page-layout>
    <template #title>
      <div class="layout-flex">
        <div class="layout-inline">
          <el-select v-model="queryObj.siteId" placeholder="全部站点" filterable multiple collapse-tags>
            <el-option v-for="item in siteIdOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="layout-inline">
          <el-date-picker
            type="daterange"
            v-model="dateSection"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            range-separator="至"
            clearable
          >
          </el-date-picker>
        </div>
      </div>
    </template>
    <div class="page-flex-column">
      <div class="page-flex-status-bar">
        <status-bar></status-bar>
      </div>
      <div class="page-flex-card-panel">
        <card-panel>
          <el-table-block2
            :column="column"
            :data="rows"
            :pagination="true"
            :currentPage="pagination.pageNo"
            :pageSize="pagination.pageSize"
            :total="pagination.total"
            layout="prev, pager, slot, jumper, next"
            @currentChange="handleCurrentChange"
          />
        </card-panel>
      </div>
    </div>
  </page-layout>
</template>

<script>
import StatusBar from '@/views/reservoir/shuiYuQingJianCe/warning/StatusBar'

export default {
  name: 'index',
  components: {
    StatusBar
  },
  data() {
    return {
      dateSection: [],
      queryObj: {
        siteId: ''
      },
      siteIdOptions: [],
      pagination: {
        pageNo: 1,
        pageSize: 5,
        total: 200
      },
      column: [
        {
          label: '监测时间',
          prop: 'date',
          align: 'center'
        },
        {
          label: '水库名称',
          prop: 'name',
          align: 'center'
        },
        {
          label: '监测点名称',
          prop: 'address',
          align: 'center'
        },
        {
          label: '监测因子',
          prop: 'name',
          align: 'center'
        },
        {
          label: '预警阀值',
          prop: 'name',
          align: 'center'
        },
        {
          label: '监测值',
          prop: 'name',
          align: 'center'
        },
        {
          label: '单位',
          prop: 'name',
          align: 'center'
        }
      ],
      rows: Array.from({ length: 5 }, () => ({
        date: '2020-05-02',
        name: '韩小寒',
        address: '陕西省西安市高新区汇鑫IBC'
      }))
    }
  },
  methods: {
    handleCurrentChange(pageNo) {
      console.log('handleCurrentChange', pageNo)
      this.pagination.pageNo = pageNo
    }
  }
}
</script>

<style lang="scss" scoped></style>
